import type { FunctionalComponent, VNode } from 'vue'
import { h } from 'vue'

interface SVGWrapperProps {
  name?: string
  color?: string
}

const SVGWrapper: FunctionalComponent<
  SVGWrapperProps,
  Record<never, never>,
  { default: () => VNode | VNode[] }
> = ({ name = '', color = 'currentColor' }, { slots }) =>
  h(
    'svg',
    {
      'xmlns': 'http://www.w3.org/2000/svg',
      'class': ['icon', `${name}-icon`],
      'viewBox': '0 0 1024 1024',
      'fill': color,
      'aria-label': `${name} icon`,
    },
    slots.default(),
  )

SVGWrapper.displayName = 'SVGWrapper'

export const ArrowLeftIcon: FunctionalComponent = () =>
  h(SVGWrapper, { name: 'arrow-left' }, () =>
    h('path', {
      d: 'M802.8 448h-428l166-158.8c23.8-25 23.8-65.4 0-90.4s-62.4-25-86.4 0L178 466.8c-12 11.6-18 27.4-18 44.8v0.8c0 17.4 6 33.2 18 44.8l276.2 268c24 25 62.6 25 86.4 0 23.8-25 23.8-65.4 0-90.4l-166-158.8h428c33.8 0 61.2-28.6 61.2-64 0.2-36-27.2-64-61-64z',
    }),
  )

ArrowLeftIcon.displayName = 'ArrowLeftIcon'

export const ArrowRightIcon: FunctionalComponent = () =>
  h(SVGWrapper, { name: 'arrow-right' }, () =>
    h('path', {
      d: 'M569.8 825.2l276.2-268c12-11.6 18-27.4 18-44.8v-0.8c0-17.4-6-33.2-18-44.8l-276.2-268c-24-25-62.6-25-86.4 0-23.8 25-23.8 65.4 0 90.4l166 158.8h-428c-34 0-61.4 28.6-61.4 64 0 36 27.4 64 61.2 64h428l-166 158.8c-23.8 25-23.8 65.4 0 90.4 24 25 62.6 25 86.6 0z',
    }),
  )

ArrowRightIcon.displayName = 'ArrowRightIcon'

export const CloseIcon: FunctionalComponent = () =>
  h(SVGWrapper, { name: 'close' }, () =>
    h('path', {
      d: 'M589.654 511.965 1007.212 84.22a49.777 49.777 0 0 0-.73-70.02 49.046 49.046 0 0 0-69.687.665L519.967 441.946 85.882 14.2a49.08 49.08 0 0 0-69.687.664 49.777 49.777 0 0 0 .664 70.019l433.454 427.082L16.859 939.048a49.777 49.777 0 0 0-.664 70.019 49.013 49.013 0 0 0 69.687.663l434.085-427.746 416.828 427.083A49.013 49.013 0 0 0 972.037 1024a48.416 48.416 0 0 0 34.512-14.27 49.777 49.777 0 0 0 .73-70.019z',
    }),
  )

CloseIcon.displayName = 'CloseIcon'

export const UpdateIcon: FunctionalComponent = () =>
  h(SVGWrapper, { name: 'update' }, () =>
    h('path', {
      d: 'M949.949 146.25v255.826c0 21.981-13.989 35.97-35.97 35.97H658.154c-13.988 0-25.983-7.992-33.973-21.981-5.997-13.989-4-27.977 7.991-39.97l79.942-77.946c-55.954-51.973-121.918-77.955-199.863-77.955-37.975 0-75.95 8.002-113.924 21.99-37.975 15.985-67.948 37.976-91.934 63.957-25.982 23.987-47.973 53.96-63.957 91.934-29.983 73.955-29.983 153.895 0 227.85 15.984 37.976 37.975 67.947 63.957 91.934 23.986 25.982 53.959 47.973 91.934 63.956 37.974 13.989 75.95 21.991 113.924 21.991 45.967 0 87.942-9.998 127.913-29.982 41.976-17.99 75.951-45.967 101.931-83.943 7.993-4 11.994-5.995 13.989-5.995 5.997 0 9.998 1.994 13.988 5.995l77.958 77.946c3.989 4 5.986 7.993 5.986 11.994 0 1.994-1.996 5.995-3.99 11.994-43.973 51.962-93.941 91.934-151.9 117.914-53.958 25.983-115.92 39.972-185.874 39.972-61.961 0-119.921-11.984-169.89-33.973-57.96-25.985-105.923-57.963-139.896-93.943-35.98-33.972-67.958-81.936-93.94-139.897-45.967-101.93-45.967-237.846 0-339.777 25.982-57.96 57.96-105.923 93.94-139.896 33.973-35.98 81.936-67.958 139.896-93.94 49.968-21.99 107.928-33.974 169.89-33.974 55.963 0 109.923 9.988 161.885 29.973 53.97 21.99 101.933 51.963 139.908 89.938l73.954-73.944c9.987-9.998 23.987-13.988 39.971-8.002 13.988 8.002 21.98 19.995 21.98 33.984z',
    }),
  )

UpdateIcon.displayName = 'UpdateIcon'
